<template>
  <div class="session-wrap">
    <div class="product-wrap" v-if="list.length>0">

      <div class="common-product" v-for="(item,index) in list" :key="index">
        <img :src="item.pictureUrl" alt="" class="product-image">
        <p class="product-name">{{ item.chineseName }}</p>
        <p class="product-price">
          <span class="activity-price">￥{{ item.marketPrice }}</span>
          <span class="market-price">￥{{ item.productId }}</span> 
        </p>
      </div>
     
     
    </div>
  </div>
</template>
<script>
  // 引入资源
  export default {
    name: 'index-three',
    components: {

    },
    props: {
      id: {
        type: String
      }
    },
    data() {
      return {
        list: [],                                                            // 专场商品数据
      }
    },
    methods: {
      // 根据moduleId 请求商品数据
       getList() {
         this.utils.request.getIndexList({ moduleId: this.id},res=>{
           if(res.data && res.data.length> 0) {
               this.list = res.data;
           }
         
        })
      },
    },

    // 请求商品数据
    mounted() {
      this.getList();
    },

  }
</script>
<style lang="scss" scoped>
  .session-wrap {
    width: 100%;
    height: auto;
    padding: 0  10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    .product-wrap {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      overflow: hidden;
      .common-product {
        width: 31%;
        height: auto;
        text-align: center;
        padding-bottom: 10px;
        box-sizing: border-box;
        .product-image {
          display: block;
          width: 100%;
          height: 110px;
        }
        .product-name {
          color: #666;
          margin-top: 5px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .product-price {
          text-align: left;
          .activity-price {
            color: red;
            font-size: 18px
          }
          .market-price {
            font-size: 14px;
            margin-left: 5px;
            color: #666;
            text-decoration: line-through;
          }
        }
      }
    }
  }
</style>
